<template>
  <div class="home">
      <!-- 顶部导航栏 -->
      <InsideHeader />
      <div class="container">
          <!-- 左侧菜单 -->
          <leftMenu :isCollapse="isCollapse" />
          <!-- 菜单折叠图标按钮 -->
          <span class="affix" @click="isCollapse = !isCollapse" :style="{
            left: isCollapse ? '52px' : '208px',
            transition: 'all .4s'
          }">
            <el-icon v-if="!isCollapse" title="折叠"><Fold /></el-icon>
            <el-icon v-else title="展开"><Expand /></el-icon>
          </span>

          <!-- 右侧内容 -->
          <div class="content" :style="{height: `${userStore.viewHeight}px`}">
            <!-- 多标签页 -->
            <tabBar ></tabBar>
            <!-- 内容 -->
            <div :style="{height: `${userStore.viewHeight - 111}px`}">
              <router-view v-slot="{Component}">
                <transition name="fade">
                    <keep-alive :max="8">
                      <component :is="Component"  />
                    </keep-alive>
                </transition>
              </router-view>
            </div>
           
            <!-- 底部 -->
            <InsideFooter />
          </div>
      </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import leftMenu from './menu.vue'
import useUserStore from '../../store/modules/user'
import tabBar from './tabBar.vue'

const userStore = useUserStore()

const isCollapse = ref(false)

</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  .container {
      display: flex;
      padding-top: 72px;
      height: 100%;
      // 菜单折叠按钮图标
      .affix {
        position: absolute;
        top: 87px;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        z-index: 10;
        width: 24px;
        height: 24px;
        display: inline-block;
        background: #477eed;
        box-shadow: 0 0 3px #fff;
        border-radius: 50%;
        line-height: 26px;
        text-align: center;
      }
      .content {
          flex: 1;
          overflow-y: auto;
          height: 100%;
          padding: 10px 16px 56px;
          background-color: #f4f2f2;
          position: relative;
          // 组件切换添加动画效果 start
          .fade-enter-from {
            opacity: 0;
          }
          .fade-enter-to {
            opacity: 1;
          }
          .fade-leave-from {
            opacity: 1;
          }
          .fade-leave-to {
            opacity: 0;
          }
          .fade-enter-active {
            transition: all .3s;
            transition-delay: .3s;
          }
          .fade-leave-active {
            transition: all .3s;
          }
          // 组件切换动画效果 淡入淡出 end;
      }
  }
}
</style>